<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<%
	String bathPath = request.getContextPath();
	pageContext.setAttribute("bathPath", bathPath);
%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>权限组设置</title>
<link rel="stylesheet" href="${bathPath}/frame/layui/css/layui.css">
<link rel="stylesheet" href="${bathPath}/frame/static/css/style.css">
<link rel="icon" href="${bathPath}/frame/static/image/code.png">
<link type="text/css" rel="stylesheet" href="${bathPath}/css/page.css"/>
<script type="text/javascript" src="${bathPath}/js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="${bathPath}/js/ajaxSessionOut.js" ></script>
<!-- 1    css资源 -->
<link rel="stylesheet" type="text/css" href="${bathPath}/js/jquery-easyui-1.4.2/themes/default/easyui.css">
<!-- 2    图标资源 -->
<link rel="stylesheet" type="text/css" href="${bathPath}/js/jquery-easyui-1.4.2/themes/icon.css"> 
<!-- 3    EasyUI的js包 -->
<script type="text/javascript" src="${bathPath}/js/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<!-- 4    本地语言 -->
<script type="text/javascript" src="${bathPath}/js/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script>
<!-- layer -->
<link type="text/css" rel="stylesheet" href="${bathPath}/js/layer/skin/layer.css"/>
<script type="text/javascript" src="${bathPath}/js/layer/layer.js" ></script>
<script src="${bathPath}/frame/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->




<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <a class="layui-btn layui-btn-sm" onclick="addtab()" >增加人员</a>
  </div>
</script>
<script type="text/html" id="toolbarDemo1">
  <div class="layui-btn-container">
    <a class="layui-btn layui-btn-sm" onclick="addtab1()" >增加门权限</a>
  </div>
</script>
	<!--<span class="layui-btn  layui-btn-sm " lay-event="quanxuan" style="margin-left:10px;">全选</span>
	<span class="layui-btn  layui-btn-sm " lay-event="baocun" style="">保存</span>
	<span class="layui-btn  layui-btn-sm " lay-event="quanqing" style="">全清</span>  -->
<script type="text/html" id="barDemo">
  <div class="layui-btn-container">
	<span class="layui-btn layui-btn-xs" lay-event="del">删除</span>
  </div>
</script>
<script type="text/html" id="barDemo2">
  <div class="layui-btn-container">
	<span class="layui-btn layui-btn-xs" lay-event="upd">修改</span>
    <span class="layui-btn layui-btn-xs" lay-event="delete">删除</span>
  </div>
</script>

<script type="text/html" id="checkboxTpl">
  <input type="checkbox"  name="checkAll" lay-skin="primary" lay-filter="check" lay-event="ckOne" lay-from="">
</script>


<script type="text/html" id="switchTpl">
<select type="text" autocomplete="off"  name="timename" id="timename">
		{{# layui.each(d.timelist, function(index, item){ }}
            <option value="{{item}}">{{item.timename}}</option>
        {{# }); }}
</select>
</script>

<script type="text/javascript" >

var fn1 = function (field) {
	var tmp = $('#tmp').html();
	return function (data) {
	// return data[field];
	return [tmp].join('');
	};
	//console.log(tmp);
};
//console.log(fn1);


</script>
<script type="text/javascript">  
//用于权限组-门权限的增加
function addtab1(){
		//alert(timename);
			   top.layer.open({
					  title:'增加门权限',
					  type: 2,
					  area:['800px', '500px'],
					  offset:['50px','400px'],
					  content: '${bathPath}/aDKPowerGroup/addUserGroup2.action?groupID='+$("#groupID").val(),
					  /* content: '${bathPath}/aDKPowerGroup/addUserGroup2.action?groupID='+$("#groupID").val() */
						end: function() {
					        //刷新页面, @C
							location.reload();
						}
					}); 
	} 
	
//删除权限组-门权限
function delete1(d){
	//alert(d);
	layer.confirm("确定删除其权限么？", {btn: ['确定', '取消'], title: "提示"}, function(){
		 $.ajax({
			type:"POST",
			async:true,  //默认true,异步
			url:"${bathPath}/aDKPowerGroupDoor/deleteDoorPG.action?autoID="+d,  //后台增删改查的action
			success:function(data){
				if(data!="SUCCESS"){
					layer.msg("删除成功！");
					location.reload();
				}
		    }
		}); 
 	});
	
}	
	//修改门权限 @C 添加了end函数，刷新页面数据
	function upd(d){
		//alert(d);
		top.layer.open({
			title:'修改',
			type: 2,
			area:['390px', '400px'],
			offset: ['200px','500px'] ,
			content: '${bathPath}/aDKPowerGroup/findtime.action?autoID='+d,
			end: function() {
		        //刷新页面, @C
				location.reload();
			}
		}); 
	}	
	
//用于权限组-人员的增加人员
  function addtab(){
		//alert(timename);
			   top.layer.open({
					  title:'增加人员权限',
					  type: 2,
					  area:['800px', '500px'],
					  offset:['230px','550px'],
					  content: '${bathPath}/aDKPowerGroup/addUserGroup.action?groupID='+$("#groupID").val()
					  /* content: '${bathPath}/aDKPowerGroup/addUserGroup2.action?groupID='+$("#groupID").val() */
					}); 
	} 
	
	
	//删除权限组-人员权限
	function del(d){
		alert(d);
		layer.confirm("确定删除其权限么？", {btn: ['确定', '取消'], title: "提示"}, function(){
			 $.ajax({
				type:"POST",
				async:true,  //默认true,异步
				url:"${bathPath}/aDKUserGroup/deleteUserPG.action?groupid="+$("#groupID").val()+"&userid="+d,  //后台增删改查的action
				success:function(data){
					if(data!="SUCCESS"){
						layer.msg("删除成功！");
						location.reload();
					}
			    }
			}); 
     	});
		
	}
</script>

<script>
/* var agentsList=  eval('${timelist}');
for (var i = 0; i < agentsList.length; i++) {
	var array_element = agentsList[i].timeName;
	//console.log(array_element);
} */
var ckData = new Array();
//var ckData1 = new Array();//存放userid的值(全选)
var ckData2 = new Array();//存放(单选)
Array.prototype.indexOf = function (val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == val) return i;
    }
    return -1;
};

Array.prototype.remove = function (val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
    }
};

var test1Table = new Array();

//门权限
 layui.use([ 'table','layer', 'jquery', 'form'], function(){
	//debugger;
	$ = layui.jquery;
	var table = layui.table;
	var form = layui.form ,layer = layui.layer;
  	var layTableId1="test1";
  	//var flag=0; //判断表格是否在增加数据
	//返回data数据给表格
 	var laydata="";
  	
   //获取下拉框中的value
 /* 	form.on('select', function(data){
 	  console.log(data);
 	  console.log(data.elem); //得到select原始DOM对象
 	  console.log(data.value); //得到被选中的值
 	  alert( $('#timeName').val());
 	  
 	}); */
   
 	  form.on('select', function (data) {
          //debugger;
          var elem = $(data.elem);
          var trElem = elem.parents('tr');
          //var tableData = table.cache['test1'];
          console.log(tableData); 
          console.log(data.value); //得到被选中的值
          // 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
          //tableData[trElem.data('index')][elem.attr('name')] = data.value;
          // 其他的操作看需求 TODO
          //console.log(tableData); 
      });


 	
 	
 	//用于tab面板的js代码
 layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
  
  //触发事件
  var active = {
    tabAdd: function(){
      //新增一个Tab项
      element.tabAdd('demo', {
        title: '新选项'+ (Math.random()*1000|0) //用于演示
        ,content: '内容'+ (Math.random()*1000|0)
        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
      })
    }
    ,tabDelete: function(othis){
      //删除指定Tab项
      element.tabDelete('demo', '44'); //删除：“商品管理”
      
      
      othis.addClass('layui-btn-disabled');
    }
    ,tabChange: function(){
      //切换到指定Tab项
      element.tabChange('demo', '22'); //切换到：用户管理
    }
  };

  //Hash地址的定位
 var layid = location.hash.replace(/^#test1=/, '');
  element.tabChange('test1', layid);
  
  element.on('tab(test1)', function(elem){
    location.hash = 'test1='+ $(this).attr('lay-id');
  });  
});  
 	

	//下拉框
	form.on('select(tmp)', function (data) {
        //debugger;
        var elem = $(data.elem);
        console.log(elem); 
        console.log(elem.context); 
        var trElem = elem.parents('tr');
        console.log(trElem); 
        //var tableData = table.cache['test1'];
        //console.log(tableData); 
        console.log(data.value); //得到被选中的值
        //console.log(layui.$(obj.td).data('data-key'));
        // 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
        //tableData[trElem.data('index')][elem.attr('name')] = data.value;
        // 其他的操作看需求 TODO
        //console.log(tableData); 
        
        //console.log(data.elem); //得到select原始DOM对象
        //console.log(data.value); //得到被选中的值
        //$("#timeName").val(data.value)
        console.log($("#timeName").val(data.value));
         //var categoryName = data.elem[data.elem.selectedIndex].text;
        //console.log(categoryName);
        form.render('select'); 

        
    });
	
	//复选框
 table.on('checkbox(test1)', function(obj){
		  //console.log(obj.checked); //当前是否选中状态
		  //console.log(obj); 
		  //alert($(".data-index").val());
		  row=layui.$(obj.tr).data('index');
		  console.log(layui.$(obj.tr).data('index'));
		  //var tableDiv = tableBox.find("data-key");
		  //console.log(layui.$(obj.td).data('data-key'));
		  //单个选取
		  //console.log(obj.data); //选中行的相关数据
		  var cdata=obj.data;
		  //var data1=obj.data.userid;
		  //console.log(data1);
		   if(obj.checked==true){
	     	 ckData2.push(cdata);
	     	 
		  }else{
			  ckData2.pop(cdata);
			  //ckData1.remove(obj.data);
		  } 
		  //console.log(ckData2); 
		  //console.log(obj.data.ID); 
		  //console.log(obj.type);
		  
		  //如果触发的是全选，则为：all，如果触发的是单选，则为：one
		});
	
 //监听行工具栏事件
	table.on('tool(test1)', function(obj){
		var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	    //console.log(obj.data.numbers);
	    //alert(111);
	  if(layEvent === 'upd'){
		upd(data.autoID);
	    } 
	  if(layEvent === 'delete'){
		  delete1(data.autoID);
		    }
});


  //监听头工具栏事件
  	table.on('toolbar(test1)', function(obj){
  		var checkStatus = table.checkStatus(obj.config.id)
  	  ,data = checkStatus.data; //获取选中的数据
  	  //alert(JSON.stringify(data.ID));
     switch(obj.event){
    case 'quanxuan':
    	//alert(222);
    	//selectAll();
    	/* debugger;
      var data = checkStatus.data;
      alert(JSON.stringify(data)); */
      //console.log($(".layui-unselect.layui-form-checkbox"));
      $(".layui-unselect.layui-form-checkbox").addClass("layui-form-checked");
      //获取所有的数据
     var all = table.cache.test1;//获取test1所有数据
     //console.log(table);
     for(var i = 0 ; i < all.length ; i++){
    	 if(ckData.indexOf(all[i])<0){    		 
    		 ckData.push(all[i]);
    	 }
     }
     //console.log(ckData);

    break;
    case 'baocun':
    	console.log(ckData);
  		$.ajax({
			 type:"POST",
			 async:false,
			 dataType:"text",
			 //data:param,
			//url:"${bathPath}/aDKUserGroup/addUserPGroup.action?groupID="+$("#groupID").val()+"&ckData="+JSON.stringify(ckData),
		     success:function(data){
		    	/*  if(data!="SUCCESS"){
						layer.msg(data);
					} */
					layer.confirm("保存成功！", {btn: ['确定'], title: "提示",skin:"my-skin"}, function(){
						layer.close(layer.index);
						parent.location.reload(); 
					});
		     }
		 });
      
    break;
    case 'ckOne':
        console.log("选择----");
        break;
    case 'quanqing':
    	 $(".layui-unselect.layui-form-checkbox").removeClass("layui-form-checked");
    	 var all = table.cache.test1;
    	 //清除所有数据
    	 for(var i = 0 ; i < all.length ; i++){
        	 ckData.remove(all[i]);
         }
    	 
         //console.log(ckData);
    break;
  };  
  });
  
  	 /* $(document).on("click",".layui-table-body table.layui-table tbody tr ", function () {
  		 
  		 //if(checkbox==true)
  		  var index = $(this).attr('data-index');
  		  //console.log(index);
  		  var tableBox = $(this).parents('.layui-table-box');
  		 // var all = test1Table;
  		//  console.log(all);
  		  //console.log(tableBox);
  		  
  		  //存在固定列
  		  if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
  		   tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
  		  } else {
  		   tableDiv = tableBox.find(".layui-table-body.layui-table-main");
  		  }
  		  //console.log(tableDiv);
  		  var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
  		  if (checkCell.length>0) {
  		   checkCell.click();
  		  }
  		var all = table.cache.test1;
  		
  		var all =table.cache.test1;
    	//console.log(ckData);
    	var ck = $(".layui-unselect.layui-form-checkbox");
    	//console.log(ck);

  		if(index)
  		if(ckData.indexOf(all[index])<0){
  			ckData.push(all[index]);
  		}else{
  			ckData.remove(all[index]);
  			ckData.remove(all[index+all.lenght]);
  		}
  		//var select=$(".layui-select-title .layui-this");
  		//.layui-select-title .layui-input layui-unselect
  		//console.log(select);
  		
  		console.log(ckData);
  	 });
  	  
  	 $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
  	  e.stopPropagation();
  	 }); */
  	 
  	 

  //渲染表格
 table.render({
	    elem:'#test1'
	    //,id:"test1"
	    ,id:layTableId1
	    //,url:'${bathPath}/aDKPowerGroup/selectAlluser.action?groupID='+$("#groupID").val()
	    //,url:'${bathPath}/aDKController/selectAllDoor.action?groupID='+$("#groupID").val()
	    //,url:'${bathPath}/aDKController/selectAllDoor.action'
	      //,url:'${bathPath}/aDKController/selectAllu.action'
	    ,url:'${bathPath}/aDKPowerGroupDoor/selectAlldoor.action?groupID='+$("#groupID").val()
	 	//,data:getdata()
	    ,toolbar: '#toolbarDemo1' 
	    ,cellMinWidth:80
	    ,width:740
	    ,size:'sm'//小表格
	    ,cols: [[
	    	 /* {field: 'id',type: 'numbers',title:'序号', fixed: 'left',align:'center',width:'10%'} */
	    	 {type: 'checkbox', fixed: 'left',align:'center',width:'10%'}
	    	,{type: 'autoID', fixed: 'left',align:'center',width:'10%',hide:true}
	        , {type: 'numbers',title:'序号', fixed: 'left',align:'center',width:'10%'} 
	      	,{field: 'location',title:'控制器', fixed: 'left',align:'center',width:'20%'}
	      	,{field: 'doorAddr',title:'门地址', fixed: 'left',align:'center',width:'10%'}
	      	,{field: 'name',title:'门名称', fixed: 'left',align:'center',width:'10%'}
	      	,{field:'timeName', title: '通行时间组', fixed: 'left',align:'center',width:'20%',} 
	      	/* ,{field: '', title: '授权',fixed: 'left',align:'center',width:'10%',toolbar: '#barDemo1'} */
	      	/* ,{field: '', title: '授权',fixed: 'left',align:'center',width:'10%',templet: '#checkboxTpl', unresize: true} */
	        /* ,{field:'timename', title: '通行时间组',width:'30%',templet: '#switchTpl',sort:false}  */
	        //,{field: '', title: '通行时间组',fixed: 'left',align:'center',templet: '#switchTpl',width:'20%'} 
	       /*  ,{ field:'timename',title: '通行时间组',search: true, edit: false, width:'20%', type: 'normal', templet: fn1('tmp')} */
	      	 ,{field: '', title: '操作',fixed: 'left',align:'center',width:'19.5%',toolbar: '#barDemo2'}   
	    ]]
	    ,page: true //开启分页
	    ,limit:8   //默认十条数据一页
        ,limits:[8,20,30,40,100]  //数据分页条
        ,done:function(){
        	var all =table.cache.test1;
        	console.log(ckData);
        	var ck = $(".layui-unselect.layui-form-checkbox");
        	console.log(ck);
        	//console.log(all.length);
    		  for(var j = 0 ; j < all.length ; j++){
					var index = JSON.stringify(ckData).indexOf(JSON.stringify(all[j]));
				var i = j+all.length;
		       	 if(index > -1){       
		       		 console.log(i);
		   			 ck.eq(i).addClass("layui-form-checked");
		   			 
		       	 }
		      } 
        }
	  }); 
  
//翻页勾选
});

//单击行勾选checkbox事件
 

//人员
layui.use('table', function(){
	//debugger;
	var table = layui.table;
  	var layTableId="test";
  	//var flag=0; //判断表格是否在增加数据
	//返回data数据给表格
 	var laydata="";
 	function getdata(parm){
	 	$.ajax({
			type:"POST",
			data:parm,
			async:false,  //默认true,异步
			url:"${bathPath}/aDKUserInfo/selectAll.action",
			success:function(data){
					laydata=data;
		    }
		});  
	 return laydata;
 }

  //监听头工具栏事件
  	table.on('toolbar(test)', function(obj){
  		//debugger;
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
  });
        	
  //监听行工具栏事件
	table.on('tool(test)', function(obj){
		
		//debugger;
		var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	    //alert(JSON.stringify(data).numbers);
	    //alert(layEvent);
	  if(layEvent === 'del'){
		del(data.userid);
	    } 
});

        	  
  //渲染表格
  table.render({
	    elem:'#test'
	    ,id:layTableId
	    ,url:'${bathPath}/aDKPowerGroup/selectAlluser.action?groupID='+$("#groupID").val()
	 	//,data:getdata()
	    ,toolbar: '#toolbarDemo' 
	    ,cellMinWidth:60
	    ,width:740
	    ,size:'sm'//小表格
	    ,cols: [[
	    	//{type: 'checkbox', fixed: 'left',align:'center',width:'5%'},
			 {type: 'numbers',title:'序号', fixed: 'left',align:'center',width:'10%'}
	      	,{field: 'depName',title:'所在部门', fixed: 'left',align:'center',width:'30%'}
	      	,{field: 'userid',title:'人员编号', fixed: 'left',align:'center',width:'30%'}
	      	,{field: 'username',title:'人员名称', fixed: 'left',align:'center',width:'20%'}
	      	,{field: '', title: '操作',fixed: 'left',align:'center',width:'10%',toolbar: '#barDemo'}
	    ]]
	    ,page: true //开启分页
	    ,limit:8   //默认十条数据一页
        ,limits:[8,20,30,40,100]  //数据分页条
	  });
});

 	 

//使用此配置
function saveBtu(){
	var param=$("form").serialize();
	//alert($("#groupID").val());
	layer.confirm("保存成功", {btn: ['确定'], title: "提示",skin:"my-skin"}, function(){
		$.ajax({
			 type:"POST",
			 async:false,
			 dataType:JSON,
			 data:param,
		     url:"${bathPath}/aDKDoor/doorInandUp.action",
		     success:function(data){
		    	 if(data!="SUCCESS"){
						layer.msg(data);
					}
		     }
		 });
		layer.close(layer.index);
		//parent.location.reload(); 
	}); 
}
</script>
<style type="text/css"> 
.layui-body{overflow-x:hidden;overflow-y:hidden;}
body{overflow-x:hidden;overflow-y:hidden;}
</style>
<style type="text/css">
	.my-skin .layui-layer-btn a {
	background-color:#009688;
}

	body{padding: 0px 0px;}
	.hide{display:none}
</style>

<style type="text/css">

/* 防止下拉框的下拉列表被隐藏---必须设置--- */        
.layui-table-cell {   overflow: visible ; } 
.layui-table-box {
            overflow: visible;
        }
        
.layui-table-body {
            overflow: visible;
        }
/* 使得下拉框与单元格刚好合适 */       
td .layui-form-select{
	margin-top: -10px;
	margin-left: -15px;
	margin-right: -15px;
}   


</style>
</head>
<body>
<form class="layui-form layui-form-pane"  id="myform" method="post" action="" showOnMouseOver="false"> 
<input type="hidden" id="groupID" name="groupID" value="${power.groupID}" />
<div class="layui-tab layui-tab-card" >
  <ul class="layui-tab-title">
    <li class="layui-this">门权限</li>
    <li>电梯权限</li>
    <li>人员</li>
  </ul>
  <div class="layui-tab-content" style="height:375px;">
    <!--门权限 -->
    <div class="layui-tab-item layui-show" >
      <!-- <table class="param_table" style="border:1px solid red;border-collapse:separate; border-spacing:0px 10px; width:680px; margin-left:7px;">
      </table> -->	
		<div style="width:700px; height:300px;">
			<table class="layui-hide" id="test1"  lay-filter="test1" style="">
			
		<%-- 		<div id='tmp' style="display:none;">
			<select id="timeName" name="timeName" lay-filter="tmp" style="" >
		 	 {foreach $timelist as $timeName}
			<!-- <option value="">{$val}</option> -->
			<option value="">${timeName}</option>
			{/foreach}
			  <option value="-1">---请选择---</option>
		     <c:forEach items="${timelist}" var="List">
	             <option value="${List.autoID}">${List.timeName}</option>
			</c:forEach>  
			</select>
				</div> --%>
			</table>
			
	
		</div>

		<!-- <input class="layui-btn site-demo-active layui-btn-sm" style="margin-left:305px;" type="button" onclick="saveBtu()" value="保 存"  class="primary"/> -->
    </div>
    <!--电梯权限 -->
    <div class="layui-tab-item">
    	<div>
      		<div id="kai" style="width:330px; height:300px;background-color:white;opacity:0.1;margin-top:50px;z-index:9999; position:fixed;" ></div>
	      		<table  class="param_table" style="border-collapse:separate; border-spacing:0px 3px; width:325px; margin-left:7px;">
	      			<span>哈哈哈哈哈哈</span>
	      		</table>
    		</div>
    </div>
    <!--人员-->
    <div class="layui-tab-item">
    	<div>
    		<div style="width:330px; height:300px;background-color:white;opacity:0.1;margin-top:50px;z-index:9999; position:fixed;" ></div>
	      	<!-- <table  class="param_table" style="border-collapse:separate; border-spacing:0px 3px; width:325px; margin-left:7px;">
	      	</table> -->
	      	<table class="layui-hide"  id="test"  lay-filter="test"></table>
    	</div>
    </div>
</div>
</form>
</body>
</html>